<script setup lang="js">
import { onMounted } from 'vue';
import * as PIXI from 'pixi.js';

onMounted(() => {


    const app = new PIXI.Application({
        antialias: true,
        background: '#1099bb',
    });

    document.getElementById('pixi-Slider-container').appendChild(app.view);

    const stageHeight = app.screen.height;
    const stageWidth = app.screen.width;

    // Make sure stage covers the whole scene
    app.stage.hitArea = app.screen;

    // Make the slider
    const sliderWidth = 320;
    const slider = new PIXI.Graphics().beginFill(0x272d37).drawRect(0, 0, sliderWidth, 4);

    slider.x = (stageWidth - sliderWidth) / 2;
    slider.y = stageHeight * 0.75;

    // Draw the handle
    const handle = new PIXI.Graphics().beginFill(0xffffff).drawCircle(0, 0, 8);

    handle.y = slider.height / 2;
    handle.x = sliderWidth / 2;
    handle.eventMode = 'static';
    handle.cursor = 'pointer';

    handle.on('pointerdown', onDragStart).on('pointerup', onDragEnd).on('pointerupoutside', onDragEnd);

    app.stage.addChild(slider);
    slider.addChild(handle);

    // Add bunny whose scale can be changed by user using slider
    const bunny = app.stage.addChild(PIXI.Sprite.from('https://pixijs.com/assets/bunny.png'));

    bunny.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
    bunny.scale.set(3);
    bunny.anchor.set(0.5);
    bunny.x = stageWidth / 2;
    bunny.y = stageHeight / 2;

    // Add title
    const title = new PIXI.Text('Drag the handle to change the scale of bunny.', {
        fill: '#272d37',
        fontFamily: 'Roboto',
        fontSize: 20,
        align: 'center',
    });

    title.roundPixels = true;
    title.x = stageWidth / 2;
    title.y = 40;
    title.anchor.set(0.5, 0);
    app.stage.addChild(title);

    // Listen to pointermove on stage once handle is pressed.
    function onDragStart() {
        app.stage.eventMode = 'static';
        app.stage.addEventListener('pointermove', onDrag);
    }

    // Stop dragging feedback once the handle is released.
    function onDragEnd(e) {
        app.stage.eventMode = 'auto';
        app.stage.removeEventListener('pointermove', onDrag);
    }

    // Update the handle's position & bunny's scale when the handle is moved.
    function onDrag(e) {
        const halfHandleWidth = handle.width / 2;
        // Set handle y-position to match pointer, clamped to (4, screen.height - 4).

        handle.x = Math.max(halfHandleWidth, Math.min(slider.toLocal(e.global).x, sliderWidth - halfHandleWidth));
        // Normalize handle position between -1 and 1.
        const t = 2 * (handle.x / sliderWidth - 0.5);

        bunny.scale.set(3 * (1.1 + t));
    }
})

</script>

<template>
    <div id="pixi-Slider-container"></div>
</template>

<style scoped></style>
